<template>
  <div class="delivery">
    <Header title="退货发货"></Header>

    <div class="orderBox">
      <div
        class="orderItemBox"
        v-for="(orderItem, orderItemIndex) in orderData.orderItems"
        :key="orderItemIndex"
      >
        <OrderItem :orderItem="orderItem" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCurrentInstance, onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();

// 路由参数
const routeParams = reactive({
  orderId: route.query.orderId,
  orderItemId: route.query.orderItemId,
});

// 订单数据
const orderData = reactive({
  orderItems: [],
});

// 重复提交token
const repeatSubmitToken = ref(null);
const getRepeatSubmitToken = () => {
  proxy.$thirdApi.common
    .repeatSubmitToken()
    .then((res) => {
      repeatSubmitToken.value = res.data;
    })
    .catch((error) => {});
};

// 过滤子项
const filterRefundedOrderItem = (data) => {
  var orderItems = [];
  data.orderItems.forEach((orderItem) => {
    if (
      null == routeParams.orderItemId ||
      routeParams.orderItemId == orderItem.id
    ) {
      orderItems.push(orderItem);
    }
  });
  data.orderItems = orderItems;
  return data;
};

// 页面加载完成
onMounted(() => {
  getRepeatSubmitToken();
  proxy.$orderApi.order
    .info(routeParams.orderId)
    .then((res) => {
      Object.assign(orderData, filterRefundedOrderItem(res.data));
    })
    .catch((error) => {});
});
</script>

<style lang="less" scoped>
.delivery {
  .orderBox {
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    .orderItemBox {
      display: flex;
      margin-bottom: 10px;
      .nut-checkbox {
        margin-right: 0px;
      }
    }
    .orderItemBox:last-child {
      margin-bottom: 0px;
    }
  }
}
</style>